<template>
  <div>
    <basic-layout :title="title" :showAddBtn="false">
      <div class="detailCon">
        <div class="basicBox">
          <div class="top">
            <div class="tit">
              <b>
                {{ dataInfo.XUNSGDH }}
              </b>
            </div>
            <div class="row">
              <b>
                {{ dataInfo.SWID }}
              </b>
            </div>
            <div class="Xunshi">
              <!--              <span v-if="item.YIXSSL === item.DUIXZS || item.YIXSSL!==0 || item.SHENHZT !== '07'" style="color: green">已巡视</span>-->
              <!--              <span v-if="item.YIXSSL !== item.DUIXZS || item.YIXSSL===0" style="color: red">待巡视</span>-->
              <!--              <span v-if="item.SHENHZT === '07'" style="color: blue">巡视中</span>-->
            </div>

            <div class="middle">
              <p>
                <label>开始时间：</label>
                <span>{{ dataInfo.XUNSKSSJ }}</span>
              </p>
              <p>
                <label>结束时间：</label>
                <span>{{ dataInfo.XUNSJSSJ }}</span>
              </p>
            </div>
            <div class="downOtherProcess">
              <van-progress
                :percentage="(dataInfo.YIXSSL/dataInfo.DUIXZS)*100"
                color="rgb(100,171,224)"
                track-color="#aaa"
              />
            </div>
            <div class="downOtherText">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ dataInfo.YIXSSL }}/{{ dataInfo.DUIXZS }}
            </div>
            <div class="bottom">
            </div>
          </div>
          <div class="followerBox">
            <div v-for="(item, index) in dataList">
              <div v-if="dataInfo.XUNSKSSJ < datetimeStr && dataInfo.XUNSJSSJ>datetimeStr">
                <van-collapse v-model="activeNames">
                  <van-collapse-item :title="item[0].FANGCNAME +'('+item.length+')'" :name="activeNameStr(index)">
                    <div v-for="i in item">
                      <div class="dataStyle">
                        <div>
                          <p>实物编码:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ i.SWID }}</p>
                          <p>设备名称:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ i.SBMC }}</p>
                          <p>设备型号:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ i.SBXH }}</p>
                        </div>
                        <div class="imgMain">
                          <div v-if="i.SHIFXS == '01'" class="btn">
                            <van-button color="#f25454" plain @click="jumpToEdit(i)">报修</van-button>
                          </div>
                          <div v-if="i.SHIFXS == '02'" class="btn1">
                            <van-button color="green" plain @click="jumpToEdit(i)">扫码巡视</van-button>
                          </div>
                          <div v-if="i.SHIFXS == '03'" class="img">
                            <img class="imgS" src="../../../assets/images/nx/icon_ok_tick.png"/>
                          </div>
                        </div>
                      </div>
                    </div>
                  </van-collapse-item>
                </van-collapse>
              </div>
              <div v-else>
                <van-collapse v-model="activeNames">
                  <van-collapse-item :title="item[0].FANGCNAME+'('+item.length+')'" :name="activeNameStr(index)">
                    <div v-for="i in item">
                      <div class="dataStyle">
                        <div>
                          <p>实物编码:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ i.SWID }}</p>
                          <p>设备名称:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ i.SBMC }}</p>
                          <p>设备型号:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ i.SBXH }}</p>
                        </div>
                        <div class="imgMain">
                          <div v-if="i.SHIFXS == '01'" class="btn">
                            <!--                        <van-button color="#" plain @click="jumpToEdit(i)">报修</van-button>-->
                          </div>
                          <div v-if="i.SHIFXS == '02'" class="btn1">
                            <van-button color="#aaa" plain @click="jumpToEdit(i)">扫码巡视</van-button>
                          </div>
                          <div v-if="i.SHIFXS == '03'" class="img">
                            <img class="imgS" src="../../../assets/images/nx/icon_ok_tick.png"/>
                          </div>
                        </div>
                      </div>
                    </div>
                  </van-collapse-item>
                </van-collapse>
              </div>
            </div>
          </div>
        </div>
      </div>
    </basic-layout>
  </div>
</template>
<script>
import { shebxjDuixList, saveXunjjg } from '@/api/srvAssurance/assetLabel/assetLabel'

export default {
  name: 'inspectionView',
  components: {},

  data () {

    return {
      open: '展开',
      title: '',
      ZHut: false,
      Munlength: 0,
      Mun: '',
      activeNames: [],
      dataInfo: {},
      loading: false,
      isFold: true,
      finished: false,
      refreshing: false,
      queryParam: {
        shebxjid: '',
        type: '',
        pageIndex: 1,
        pageSize: 10,
      },
      dataList: [],
      datetimeStr: '',
    }
  },

  created () {
    this.datetimeStr = this.timeData()
    let data = this.$route.query.dataInfo
    if (JSON.stringify(data) != '"[object Object]"') {
      this.queryParam.shebxjid = data.ID
      this.queryParam.type = data.type
      this.dataInfo = data
      this.title = data.XUNJJHMC
      console.log(1111, this.dataInfo)
      sessionStorage.setItem('inspectionView-dataInfo', JSON.stringify(data))
    } else {
      var item = sessionStorage.getItem('inspectionView-dataInfo')
      var dataParse = JSON.parse(item)
      this.queryParam.shebxjid = dataParse.ID
      this.queryParam.type = dataParse.type
      this.dataInfo = dataParse

    }
    this.initData()

  },

  methods: {
    activeNameStr (val) {
      return val + ''
    },

    jumpToEdit (item) {
      console.log('111111111')
      item.type = this.queryParam.type
      let _this = this
      if (item.SHIFXS == '02') {
        /*let swid = "0150700000000000019640078";
        let swidlist = [];
        this.dataList[0].forEach(function(item, index) {
          let swids = item.SWID;
          console.log("111111111", swids);
          swidlist.push(swids)
        })
        console.log("2222222222", swidlist);
        if(swidlist.includes(swid)){
          console.log("333333", swidlist.includes(swid));
        }else{
          _this.$toast('扫描的设备不在巡视工单中！');
        }*/
        wx.scanQRCode({
          desc: 'scanQRCode desc',
          needResult: 1, // 默认为0，扫描结果由i国网处理，1则直接返回扫描结果，
          scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
          success: function (res) {
            let swid = res.resultStr
            let swidlist = []
            _this.dataList[0].forEach(function (item, index) {
              let swids = item.SWID
              console.log('111111111', swids)
              swidlist.push(swids)
            })
            console.log('2222222222', swidlist)
            if (swidlist.includes(swid)) {
              let param = {
                type: item.type,
                xunsid: item.XUNSID,
                shebid: item.SHEBID,
                xunsjg: '00',
              }
              saveXunjjg(param).then((res) => {
                if (res.status == 0) {
                  _this.$toast('巡视成功')
                  _this.initData()
                }
              })
            } else {
              _this.$toast('扫描的设备不在巡视工单中！')
            }

          },
          error: function (res) {
            if (res.errMsg.indexOf('function_not_exist') > 0) {
              alert('版本过低请升级')
            }
          }
        })
      } else {
        _this.$router.push({
          path: '/inspectionPlan/inspectionEdit',
          query: {
            dataInfo: item
          }
        })
      }
    },

    onRefresh () {
      this.initData()
    },

    async initData () {
      this.queryParam.pageIndex = 1
      this.finished = false
      this.refreshing = true
      await this.getDataList()
      this.refreshing = false
    },

    // 加载下一页
    nextPage () {
      // 判断第一次查出来的数据是否还有下一页数据，如果没有则不调接口
      if (this.dataList.length < (this.queryParam.pageIndex * this.queryParam.pageSize)) {
        this.finished = true
        return
      }
      setTimeout(() => {
        this.queryParam.pageIndex += 1
        this.getDataList()
      }, 1000)
    },
    timeData () {
      let now = new Date()

      // 格式化日期和时间
      let year = now.getFullYear()
      let month = ('0' + (now.getMonth() + 1)).slice(-2)
      let day = ('0' + now.getDate()).slice(-2)
      let hour = ('0' + now.getHours()).slice(-2)
      let minute = ('0' + now.getMinutes()).slice(-2)
      let second = ('0' + now.getSeconds()).slice(-2)

      // 构造时间字符串
      let timeStr = `${year}-${month}-${day} ${hour}:${minute}:${second}`
      return timeStr
    },

    getDataList: async function () {
      this.loading = true
      let res = await shebxjDuixList(this.queryParam)
      if (res.status == 0) {
        if (this.queryParam.pageIndex == 1) {
          // 清空列表数据
          this.dataList = []
        }
        this.dataList = this.dataList.concat(res.data)
        if (this.dataList.length > 0) {
          let dataDeal = (data) => {
            let listArr = []
            data.forEach(function (value, index) {
              let obj = []
              for (let i = 0; i < listArr.length; i++) {
                // 对比相同的字段key，相同放入对应的数组
                if (listArr[i][i] != undefined) {
                  if (listArr[i][i].FANGCNAME == value.FANGCNAME) {
                    listArr[i].push(value)
                    // listArr[i].push(this.ZHut)
                    console.log(listArr[i])
                    return
                  }
                }
              }
              // 第一次对比没有参照，放入参照
              obj.push(value)
              listArr.push(obj)
            })
            return listArr
          }
          this.dataList = dataDeal(this.dataList)
          this.dataList = this.dataList
        }
        // 如果数据加载完毕，finished 标志位置为 true，滑到页面底部则不会再触发 nextPage() 方法了。
        if (this.dataList.length >= res.totalCount) {
          this.finished = true
        }
      }
      this.Mun = this.Munlength
      this.loading = false
      console.log(this.dataList)
    },

  }
}
</script>

<style scoped lang="less">
.detailCon {
  height: 100%;
  padding: 12px;
  //box-sizing: border-box;
  background-color: #8080803b;

}


.basicBox {
  padding: 15px 10px 14px;
  box-sizing: border-box;
  align-items: center;
  background: #fff;
  border-radius: 8px;
  position: relative;

  .downOtherProcess {
    width: 80%;
    float: left;
  }

  /deep/ .van-progress__pivot {
    display: none;
  }

  /deep/ .van-progress {
    height: 11px;
    margin-top: 4px;
  }

  .top {
    border-bottom: 1px dashed #aaa;
    padding: 0 5px 10px;
    margin-bottom: 12px;
    position: relative;
    line-height: 22px;


    .tit {
      b {
        font-size: 16px;

        span {
          font-size: 14px;
        }
      }

      .type {
        background: #f2a84e;
        font-size: 9px;
        color: #fff;
        margin-left: 8px;
        padding: 2px 3px;
        border-radius: 3px;
      }
    }

    .row {
      color: #999;
      font-size: 13px;
    }

    .qrcode {
      position: absolute;
      top: 0;
      right: 0;

      img {
        width: 35px;
        height: 35px;
        margin-right: 10px;
      }
    }

    .Xunshi {
      position: absolute;
      top: 0.00667rem;
      right: 0.68rem;
      font-size: 15px;
      margin-left: 78%;
    }
  }


  .middle {
    padding: 0 5px 5px;
    box-sizing: border-box;
    //border-bottom: 1px dashed #aaa;
  }

  p {
    display: flex;
    line-height: 28px;

    label {
      width: 75px;
      color: #999;
    }

    span {
      color: #333;
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  .bottom {
    padding: 0 5px;
    box-sizing: border-box;
    margin-top: 10px;

    p span,
    p label {
      color: #999;
    }
  }
}

/deep/ .van-dialog {
  height: 70%;
}

/deep/ .van-dialog__content {
  overflow-y: scroll;
  height: 85%;
}

/deep/ .van-collapse-item__content {
  padding: 0px;
  background-color: aaa;
}

/deep/ .van-cell {
  border-radius: 10px;
}

/deep/ .van-cell__title {
  font-weight: bold;
  width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

h5 {
  border-bottom: 1px solid #f1f1f2;
  line-height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  font-weight: normal;
  position: relative;

  b {
    font-size: 14px;
  }

  p {
    font-weight: normal;
    position: absolute;
    color: #888;
    right: 15px;
  }
}

.followerBox {
  background: #fff;
  border-radius: 8px;
  margin-top: 12px;


  /deep/ .van-empty {
    padding: 20px 0;

    .van-empty__image {
      width: 50px;
      height: 50px;
    }
  }

  .dataStyle {
    padding: 0.1rem 0.26667rem 6px;
    position: relative;
    line-height: 25px;
    border-bottom: 0.02667rem dashed #aaa;

    .imgMain {
      position: absolute;
      right: 15px;
      top: 35px;

      .btn {
        right: 10px;
        bottom: 25px;

        .van-button {
          padding: 0 10px;
          height: 30px;
          line-height: 30px;
          border-radius: 17px;
          font-size: 13px;
        }
      }

      .btn1 {
        right: 10px;
        bottom: 25px;

        .van-button {
          padding: 0 10px;
          height: 30px;
          line-height: 30px;
          border-radius: 17px;
          font-size: 13px;
        }
      }
    }
  }

  .list-item {
    display: flex;
    padding: 10px;
    box-sizing: border-box;
    align-items: center;

    img {
      width: 60px;
      height: 60px;
      margin-right: 10px;
    }

    .right {
      flex: 1;
      overflow: hidden;

      div {
        display: flex;
        line-height: 28px;

        label {
          width: 75px;
          color: #999;
        }

        p {
          color: #333;
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>
